/**
 * Created by huotaol on 2017/5/2.
 */
import React, {Component} from "react";
import {connect} from "react-redux";
import {Image, Text, TouchableOpacity, TouchableWithoutFeedback, View} from "react-native";
import * as homePageAction from "../redux/action/homePage";
import CustomStyle from "../../common/style/CustomStyle";
import Util from "../main/Util";
import * as AreaConstant from "../constant/Area";
import Modal from "react-native-modal";
import AreaSelect from "../page/AreaSelect";
import {Actions} from "react-native-router-flux";
import * as BuyCarAction from "../redux/action/BuyCar";
import {refreshBuyCarFilter} from "../page/buyCar/BuyCar";

class SaleHeader extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {isModalVisible: false};
    }

    componentDidMount() {
        this.loadSelectedArea();
    }

    _setModalState(isShow) {
        this.setState({isModalVisible: isShow === true});
    }

    loadSelectedArea() {
        Util.loadData({
            key: AreaConstant.SELECTED_AREA, sync: {
                selectedArea(params){
                    let {id, resolve, reject, syncParams: {extraFetchOptions, someFlag}} = params;
                },
            },
        }).then(ret => {
            this.props.setSelectArea(ret);
        });
    }

    render() {
        return (
            <View style={[{
                backgroundColor: '#FFC000',
                flexDirection: 'row',
                paddingTop: CustomStyle.navBasePaddingTop,
                width: CustomStyle.screenWidth,
                height: CustomStyle.navTotalHeight,
                justifyContent: 'space-around',
                alignItems: 'center',
                paddingRight: CustomStyle.getActualSizeInHorizontal(30),
            }]}>
                <TouchableOpacity
                    onPress={() => {
                        this._setModalState(true);
                    }}
                    style={{
                        flexDirection: 'row',
                        alignItems: 'center',
                        marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                        marginRight: CustomStyle.getActualSizeInHorizontal(10),
                    }}
                >
                    <Image source={require('../../img/location.png')} style={{
                        width: CustomStyle.getActualSizeInHorizontal(48),
                        height: CustomStyle.getActualSizeInVertical(48)
                    }}/>

                    <Text style={[CustomStyle.baseText, {
                        marginLeft: CustomStyle.getActualSizeInHorizontal(10),
                        color: '#ffffff',
                        fontSize: CustomStyle.getActualSizeInHorizontal(32),
                    }]}>{this.props.selectArea.name}</Text>
                </TouchableOpacity>
                <TouchableOpacity
                    onPress={() => {
                        Actions.SearchByKeyword();
                    }}
                    style={{
                        alignItems: 'center',
                        backgroundColor: '#ffffff',
                        flex: 1,
                        flexDirection: 'row',
                        marginLeft: CustomStyle.getActualSizeInHorizontal(10),
                        width: CustomStyle.getActualSizeInHorizontal(500),
                        height: CustomStyle.getActualSizeInHorizontal(68),
                        marginRight: CustomStyle.getActualSizeInHorizontal(17),
                        borderRadius: CustomStyle.getActualSizeInHorizontal(34),
                    }}
                >

                    <Text
                        style={[CustomStyle.baseText, {
                            textAlign: 'center',
                            textAlignVertical: 'center',
                            fontSize: CustomStyle.getActualFontSize(28),
                            color: '#b2a682',
                            flex: 1,
                            alignSelf: 'auto',
                            marginLeft: CustomStyle.getActualSizeInHorizontal(20),
                        }]}
                    >请输入要查询的车辆</Text>
                </TouchableOpacity>

                <TouchableWithoutFeedback onPress={() => {
                    this.setState({isModalVisible: false});
                }}>
                    <Modal isVisible={this.state.isModalVisible}
                           backdropOpacity={0.65}
                           animationIn="fadeInDownBig"
                           animationOut="fadeOutUpBig"
                           style={{
                               justifyContent: 'flex-start',
                               margin: 0,
                           }}
                    >
                        <AreaSelect
                            selectArea={this.props.selectArea}
                            onPress={(area) => {
                                this.setState({isModalVisible: false});
                                this.props.setSelectArea(area);
                                this.props.updateFilter({locationID: area.id});
                                refreshBuyCarFilter();
                            }}/>
                    </Modal>
                </TouchableWithoutFeedback>
            </View>
        );
    }
}

const mapStateToProps = (state) => {
    const {selectArea} = state;
    const {area} = selectArea;
    return {
        selectArea: area,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        setSelectArea: (area) => {
            dispatch(homePageAction.setSelectArea(area));
        },
        updateFilter: param => dispatch(BuyCarAction.buyCarFilter(param)),
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(SaleHeader);